<template>
    <Layout class="personal_center">
        <Sider :width="240" hide-trigger>
            <Row class-name="head_area">
                <Col>
                    <Avatar class="icon"
                            :src="User.icon"
                            alt
                            srcset
                    />
                    <div>{{User.username}}</div>
                    <Row :gutter="10">
                        <Col :sm="24" :lg="12" class="user_fans"><a href="#">粉丝-<span>1000</span></a></Col>
                        <Col :sm="24" :lg="12" class="user_follow"><a href="#">关注-<span>1000</span></a></Col>
                    </Row>
                </Col>
            </Row>
            <Row class="introduce_area">
                <Col class="personal_introduce" span="20" offset="2">
                    <Card>
                        <h3 slot="title">个人介绍</h3>
                        <p>这是我的个人介绍</p>
                        <p>介绍非常完美</p>
                    </Card>
                </Col>
                <Col span="20" offset="2">
                    <Card>
                        <h3 slot="title">掌握技能</h3>
                        <Tag>Java</Tag>
                        <Tag>Python</Tag>
                        <Tag>C#</Tag>
                    </Card>
                </Col>
            </Row>
        </Sider>
        <Layout>
            <Header>
                <Row type="flex">
                    <Col span="16">
                        <Tag>标签一</Tag>
                        <Tag>标签二</Tag>
                    </Col>
                    <Col class="search_area" span="8">
                        <Input suffix="ios-search" placeholder="查询你的帖子" style="width: auto"/>
                    </Col>
                </Row>

            </Header>
            <Content>
                <Row type="flex">
                    <Col :xs="20">
                        <h2>我的帖子</h2>
                    </Col>
                    <Col span="4" class="more_button_area">
                        <Button>更多</Button>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <List v-for="(p,i) in pagePage.records">
                            <ListItem>
                                <ListItemMeta
                                        :avatar="User.icon"
                                        :title="p.title" :description="User.username"/>
                                <template slot="action">
                                    <li>
                                        <a :href="'/page/' + p.id">查看</a>
                                    </li>
                                    <!--<li><a href="">编辑</a></li>-->
                                    <li>
                                        <a  href="" @click.prevent="delPage(p.id,i)">删除</a>
                                    </li>
                                </template>
                            </ListItem>
                        </List>
                    </Col>
                </Row>
                <Row class="page_choose">
                    <Col>

                        <Page @on-change="changePage" @on-page-size-change="changepageSize"
                              show-sizer show-elevator/>
                    </Col>
                </Row>
            </Content>
        </Layout>
    </Layout>
</template>

<script>
    import {mapActions, mapGetters} from 'vuex'
    import Utils from "../js/Utils";

    export default {
        name: "PersonalCenter",
        data: function () {
            return {
                pagePage: {
                    current: 1,
                    pages: 1,
                    records: [],
                    size: 10,
                    total: 2,
                },
            };

        },
        computed: {
            ...mapGetters(["User"])
        },
        watch: {
            User: function (val) {
                this.getPage();
            },
        },
        methods: {
            ...mapActions("page", ["getAllPage", "deletePage"]),
            ...mapActions("user", ["getUser", "loginUser"]),
            delPage: function (id, i) {
                console.log(id)
                this.deletePage({
                    id,
                    callback: success => {
                        if (success) {
                            this.$Message.success("删除成功");
                            this.pagePage.records.splice(i, 1);
                            this.pagePage.total++;
                        }
                        !success && this.$Message.error("删除失败");
                    }
                })
            },
            changePage: function (page) {

            },
            changepageSize: function (size) {

            },
            getPage: function (page = 1, size = 10) {
                if (!this.User.id)
                    return;

                this.getAllPage({
                    userId: this.User.id,
                    page, size,
                    callback: pages => {
                        this.pagePage = pages;
                        this.pagePage.records.forEach(x => {
                            this.getUser({
                                id: x.userId,
                                info: (type, msg) => this.$Message[type](msg),
                                callback: (user) => {
                                    let {username, icon} = user;
                                    this.$set(x, 'username', username)
                                    this.$set(x, 'icon', icon)
                                }
                            })
                        })
                    }
                })
            },
        },
        created:function() {
            this.getPage();
        },
    }
</script>

<style scoped>
    .personal_center {
        background: #f5f7f9;
        min-height: 100vh;
    }

    * {
        text-align: left;
    }

    .ivu-layout-content {
        position: relative;
    }

    .icon {
        width: 100px;
        height: 100px;
    }

    .ivu-layout-sider {
        background: #f5f7f9;
    }

    .ivu-layout-header {
        background: #f5f7f9;
    }

    .head_area {
        padding: 60px;
    }

    .head_area * {
        text-align: center;
    }

    .personal_introduce {
        padding-bottom: 10px;
    }

    .search_area {
        text-align: right;
    }

    .ivu-layout-content {
        padding: 50px;
    }

    .more_button_area {
        text-align: right;
    }

    .ivu-page {
        text-align: center;
    }

    .page_choose {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 20px;
    }
</style>